<template>
  <view>
    <view class="flex items-center">
      <slot name="icon"></slot>
      <text class="text-24rpx ml-8rpx" :style="{ color: color }">{{ title }}</text>
    </view>
    <view v-if="showColumn" class="flex items-center mt-8rpx">
      <view
        v-for="item in bgColumn"
        :key="item"
        class="w-24rpx h-8rpx mr-8rpx"
        :style="{ 'background-color': currentColumn >= item ? color : bgColor }"
      ></view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  color: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  bgColor: {
    // 底部灰色块颜色
    type: String,
    default: '#E6E6E6'
  },
  showColumn: {
    // 是否显示底部色块
    type: Boolean,
    default: true
  },
  bgColumn: {
    // 底部有多少个灰色块
    type: Number,
    default: 4
  },
  currentColumn: {
    // 需要显示颜色的块数
    type: Number,
    default: 1
  }
});
</script>

<style lang="scss" scoped></style>
